<template>
    <el-card>
        <el-table :data="skuList" border class="mb-10">
            <el-table-column type="index" label="序号" width="80" align="center" />
            <el-table-column label="名称" prop="skuName" />
            <el-table-column label="描述" prop="skuDesc" />
            <el-table-column label="默认图片">
                <template #default="{ row, $index }">
                    <el-image :src="row.skuDefaultImg" style="width: 80px;height: 80px;"></el-image>
                </template>
            </el-table-column>
            <el-table-column label="重量(KG)" prop="weight" />
            <el-table-column label="价格(元)" prop="price" />
            <el-table-column label="操作" width="250" align="center">
                <template #default="{ row, $index }">
                    <el-button :type="row.isSale ? 'success' : 'info' " size="small" :icon="row.isSale ? Top : Bottom"
                        @click="cancelSaleOrSale(row)"></el-button>
                    <el-button type="primary" ref="buttonRef" size="small" :icon="Edit" @click="handleEdit"></el-button>
                    <el-button type="info" size="small" :icon="InfoFilled" @click="handleInfo(row)"></el-button>
                    <el-popconfirm :title="`请确认是否删除[${row.skuName}]?`" @confirm="handleDelete(row)">
                        <template #reference>
                            <el-button type="danger" size="small" :icon="Delete"></el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-drawer v-model="drawer" size="50%" >
            <el-row>
                <el-col :span="5">名称</el-col>
                <el-col :span="16">{{ skuInfo?.skuName }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="5">价格</el-col>
                <el-col :span="16">{{ skuInfo?.price }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="5">平台属性</el-col>
                <el-col :span="16">
                    <el-tag type="success" v-for="attrVal in skuInfo?.skuAttrValueList" :key="attrVal.id" class="mr-5" >
                        {{ `${attrVal.attrName}-${attrVal.valueName}` }}
                    </el-tag>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="5">销售属性</el-col>
                <el-col :span="16">
                    <el-tag type="success" v-for="saleAttr in skuInfo?.skuSaleAttrValueList" :key="saleAttr.id" class="mr-5" >
                        {{ saleAttr.saleAttrName + '-' + saleAttr.saleAttrValueName }}
                    </el-tag>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="5">商品图片</el-col>
                <el-col :span="16">
                    <el-carousel height="400px" width="150px" >
                        <el-carousel-item v-for="img in skuInfo?.skuImageList" :key="img.id">
                            <el-image :src="img.imgUrl" width="100%" height="100%" ></el-image>
                        </el-carousel-item>
                    </el-carousel>
                </el-col>
            </el-row>
        </el-drawer>
        <el-pagination v-model:currentPage="page" layout="prev, pager, next, jumper" :total="total"
            @current-change="handleCurrentChange" />
    </el-card>

</template>

<script setup lang="ts">
import type { SkuModel } from '@/api/sku';
import skuApi from '@/api/sku';
import { Edit, Bottom, InfoFilled, Delete, Top } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
const skuList = ref<SkuModel[]>([])
const page = ref(1)
const limit = ref(10)
const total = ref(0)
const buttonRef = ref()
const drawer = ref(false)
const skuInfo = ref<SkuModel>()
// 获取sku列表
const getSkuPage = async () => {
    try {
        let result = await skuApi.getPage(page.value, limit.value)
        skuList.value = result.records
        total.value = result.total
    } catch (error) {
        ElMessage.error('获取SKU列表失败')
    }
}
// 上架或下架
const cancelSaleOrSale = async (row: SkuModel) => {
    if (row.isSale) {
        try {
            await skuApi.cancelSale(row.id!)
            row.isSale = 0
            ElMessage.success('下架成功')
        } catch (error) {
            ElMessage.error('下架失败')
        }
    } else {
        try {
            await skuApi.onSale(row.id!)
            ElMessage.success('上架成功')
            row.isSale = 1
        } catch (error) {
            ElMessage.error('上架失败')
        }
    }
}
// 编辑
const handleEdit = () => {
    ElMessage.success('正在开发中')
}
// 查看
const handleInfo = async (row: SkuModel) => {
    drawer.value = true;
    try {
        let result = await skuApi.getSkuInfo(row.id!)
        skuInfo.value = result
    } catch (error) {
        ElMessage.error('获取SKU失败')
    }
}
// 删除sku
const handleDelete = async (row: SkuModel) => {
    try {
        await skuApi.delete(row.id!)
        ElMessage.success('删除成功')
        getSkuPage();
    } catch (error) {
        ElMessage.error('删除失败')
    }
}
// 翻页
const handleCurrentChange = (val: number) => {
    page.value = val;
    getSkuPage();
}
onMounted(() => {
    getSkuPage();
})
</script>

<style lang="scss" scoped>
::v-deep(.el-carousel__button){
    width: 20px;
    height: 20px;
    background: skyblue;
    border-radius: 50%;
}
.el-row{
  height: 40px;
  line-height: 40px;
  .el-col{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .el-col-5{
    font-size: 20px;
    font-weight: bolder;
    text-align: right;
    margin-right: 20px;
  }
}
</style>